<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息页面</title>
    <link rel="stylesheet" href="webjars/layui/2.5.5/css/layui.css">
    <!--    导入Jquery-->
    <script src="webjars/jquery/3.4.1/jquery.js" type="text/javascript"></script>
    <!--Layui-->
    <script src="webjars/layui/2.5.5/layui.js" type="text/javascript"></script>
    <!--    引入BootStrap-->
    <link rel="stylesheet" href="webjars/bootstrap/4.3.1/css/bootstrap.css" type="text/css">
    <!--    Js-->
    <script type="text/javascript" src="webjars/bootstrap/4.3.1/js/bootstrap.js"></script>
    <!--    Vue-->
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<!--选项卡-->
<div style="width: 100%;">
    <h7>
        <label><a href="/house/">房屋租赁管理</a></label>
        <span class="layui-icon layui-icon-right"></span>
        <label>用户信息管理</label>
    </h7>
</div>
<div id="app">
    <!--表单-->
    <form class="form-inline" id="form1">
        <div class="form-group" style="width: 450px">
            <label>用户姓名：</label>
            <input type="text" class="form-control" v-model="name" name="name" placeholder="请输入用户姓名"
                   style="width: 300px">
        </div>

        <label>性别：</label><select class="form-control" style="width: 300px" name="sex" v-model="sex">
        <option>请选择</option>
        <option value="男">男</option>
        <option value="女">女</option>
    </select>

        <button type="button" @click="querys" class="btn btn-primary btn-sm" style="width: 80px;margin-left: 10px">查询
        </button>
        <button type="button" class="btn btn-warning btn-sm" style="width: 80px;margin-left: 10px">重置</button>
    </form>
    <div>
        <a href="" @click.prevent="open" style="text-decoration-line: none" v-text="message"></a>
    </div>
    <!--添加删除按钮-->
    <div style="margin-top: 10px">
        <button type="button" class="btn btn-success btn-sm" @click="add">添加</button>
        <button type="button" class="btn btn-danger btn-sm" onclick="del()">删除</button>
    </div>

</div>


<table id="demo" lay-filter="test" lay-data="{id: 'idTest'}"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
<script type="text/javascript">
    var table;
    var tableIns;
    <!--Vue-->
    var app = new Vue({
        el: "#app",
        data: {
            message: "展开",
            name: "",
            sex: ""
        },
        methods: {
            add() {
                // alert("OK")
                /*
                 * 弹出框弹出表单
                 * */
                layer.open({
                    type: 2,
                    title: "添加用户",
                    anim: 5,
                    content: "http://localhost:8080/house/userInfo.html", //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    area: ['500px', '500px']
                });
            },
            open() {
                if (this.message == "展开") {
                    this.message = "收起"
                } else if (this.message == "收起") {
                    this.message = "展开"
                }
            },
            querys() {
                //表格重载
                table.reload('idTest',{
                    url:'http://localhost:8080/house/getUsersByNameAndSex',
                    where:{
                        name:this.name,
                        sex:this.sex
                    }
                });

            }
        }
    });

    layui.use('table', function () {
        table = layui.table;
        var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值
        //第一个实例
        tableIns = table.render({
            elem: '#demo',
            id: 'idTest',
            height: '400'
            , url: 'http://localhost:8080/house/getAllUsers' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left', width: 90},
                {field: 'id', title: '用户编号', width: 100, sort: true}
                , {field: 'name', title: '用户姓名', width: 90}
                , {field: 'famousRace', title: '名族', width: 90}
                , {field: 'certificates', title: '证件类型', width: 90}
                , {field: 'certificatesNum', title: '证件号码', width: 177}
                , {field: 'sex', title: '性别', width: 90}
                , {field: 'householdRegister', title: '户籍', width: 90}
                , {field: 'phone', title: '电话号码', width: 180}
                , {fixed: 'right', width: 250, align: 'center', toolbar: '#barDemo'}
            ]]
        });

        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'detail') { //查看
                layer.open({
                    type: 2,
                    title: "查看用户",
                    anim: 3,
                    content: "http://localhost:8080/house/getUserById?id=" + data.id,
                    area: ['950px', '200px']
                });


            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //
                    // alert(data.id)
                    $.ajax({
                        url: "http://localhost:8080/house/deleteUserById",
                        data: {
                            "id": data.id
                        }
                        , type: 'post',
                        dataType: "json",
                        success: function (result) {
                            if (result.code > 0) {
                                tableIns.reload();
                            }

                        }
                    })

                });
            } else if (layEvent === 'edit') { //编辑
                layer.open({
                    type: 2,
                    title: "查看用户",
                    anim: 3,
                    content: "http://localhost:8080/house/updateUser?id=" + data.id,
                    area: ['500px', '500px']
                });


            }
        });


    });

    //外部选中删除方法
    function del() {
        var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值
        // alert(checkStatus.data)
        // console.log(checkStatus.data)
        // var str= JSON.parse(checkStatus.data)
        //转为json对象
        // var s= JSON.stringify(checkStatus.data);
        // console.log(s)

        var arry = checkStatus.data;

        var str = JSON.stringify(arry);
        $.ajax({
            url: "http://localhost:8080/house/delAllUser",
            data: {
                "idArry": str
            }
            , type: 'post',
            dataType: "json",
            success: function (result) {
                if (result.type > 0) {
                    //表格重载
                    tableIns.reload();
                }
            }
        })

        // console.log(checkStatus.data) //获取选中行的数据
        // console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
        // console.log(checkStatus.isAll ) //表格是否全选
    }


</script>
</html>